<template>
  <div>
    <div class="div1" style="margin-top: 200px">
      <label for=""
        >用户名
        <input type="text" v-model="input1" />
      </label>
      <label for="">密码&emsp; <input type="password" v-model="input2" /> </label
      ><br />
      <el-button class="rrr" type="text"  @click="ck"
        >登录</el-button
      >
      <!-- <button >登录</button> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
    };
  },
  computed: {},
    beforeRouteEnter (to, from, next) {
      if (!JSON.parse(localStorage.getItem("vuex")).bool) {
      next();
    } else {
      next({name:JSON.parse(localStorage.getItem("vuex")).luyou});
    }
    },
  methods: {
    ck() {
      const reg1 = /^[a-zA-Z]{3,}$/; //用户名必须为不少于3个字母的英文字母
      const reg = /^[a-zA-Z]{3,}|^\d{3,}$/; // 正则表达式，匹配不少于3个字母的英文字母或不少于3个数字的数字
      if (!reg1.test(this.input1)) {
        this.$message({
            type: 'info',
            message: '用户名必须为不少于3个字母的英文字母'
          });
        return;
      }
      if (!reg.test(this.input2)) {
        this.$message({
            type: 'info',
            message: '密码必须为不少于3个字母的英文字母或不少于3个数字的数字'
          });
        return;
      }
      if (this.input1 == "admin" && this.input2 == 123456) {
        this.$message({
          type: "success",
          message: "登陆成功！",
        });
        this.$store.commit('akk')
        this.$store.commit('luyou1','app')
        this.$router.push({ name: "app" });
      } else {
        if (this.input1 != "admin") {
          this.$message({
            type: "success",
            message: "登陆成功！",
          });
          this.$store.commit('akk')
          this.$store.commit('luyou1','app2')
          this.$router.push({ name: "app2", query: { id: this.input1 } });
        }else{
          this.$message({
            type: 'info',
            message: '账户或者密码错误'
          });
        }
      }
    },
  },
};
</script>
<style lang='less' scoped>
.div1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  background-color: aliceblue;
  width: 300px;
  height: 200px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
}

label {
  margin: 10px;
}

input {
  padding: 5px;
  border-radius: 5px;
  //   border: none;
  margin-left: 10px;
}

.rrr {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

.rrr:hover {
  background-color: #0062cc;
}
</style>
